<template>
  <div class="tips mt10">请上传jpg、jpeg、png格式的图片身份证照片上传之后将自动识别</div>
  <div class="flex mt20 justify-content-space-around width100">
    <div class="flex flex-1 box-row-column box-align-center">
      <el-upload class="avatar-uploader" :action="youruploadurl" :on-success="handleSuccess" :show-file-list="false" ref="uploadRef" :disabled="peristrue">
        <img v-if="imageUrl.url1" style="width: 280px; height: 180px; border-radius: 6px" :src="imageUrl.url1" fit="cover" />
        <img v-else style="width: 280px; height: 180px" src="@/assets/image/cf/sfz1.png" fit="cover" />
      </el-upload>
      <div class="el-upload_tip">身份证人像面</div>
      
    </div>
    <div class="flex flex-1 box-row-column box-align-center">
      <el-upload class="avatar-uploader" :action="youruploadurl" :on-success="handleSuccess1" :show-file-list="false" :disabled="peristrue">
        <img v-if="imageUrl.url2" style="width: 280px; height: 180px; border-radius: 6px" :src="imageUrl.url2" fit="cover" />
        <img v-else style="width: 280px; height: 180px" src="@/assets/image/cf/sfz2.png" fit="cover" />
      </el-upload>
      <div class="el-upload_tip">身份证国徽面</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, watch } from "@/TUIKit/adapter-vue";
  const props = defineProps({
    dataurl: {
      type: Object,
      default: {},
    },
        peristrue: {
      type: Boolean,
      default:false,
    },
  });

  const imageUrl = ref({ url1: "", url2: "" });
  const uploadRef = ref(null); // 引用 el-upload 组件
  const youruploadurl = ref("https://demo-api.niuyuwang.com/admin/Ajax/upload");
  const queryParams = ref({ name: "" });
  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "chananniu", value: ""): void; (event: "getimgurl", value: {}): void }>();

  watch(
    () => props.dataurl,
    newVal => {
      // console.log("dataurl 变化:", newVal);
      imageUrl.value.url1 = newVal.url1;
      imageUrl.value.url2 = newVal.url2;
    },
    { deep: true } // 启用深度监听
  );

  function handleSuccess(response, file, fileList) {
    if (response.data.url) {
      imageUrl.value.url1 = response.data.url;
      emit("getimgurl", imageUrl.value,1);
    }

    // const reader = new FileReader();
    // reader.readAsDataURL(file.raw); // 将文件读取为 Data URL
    // reader.onload = () => {
    //   imageUrlFront.value = reader.result as string; // 将 Data URL 赋值给 imageUrlFront
    // };
  }

  function handleSuccess1(response, file, fileList) {
    if (response.data.url) {
      imageUrl.value.url2 = response.data.url;
      emit("getimgurl", imageUrl.value,2);
    }

    // const reader = new FileReader();
    // reader.readAsDataURL(file.raw); // 将文件读取为 Data URL
    // reader.onload = () => {
    //   imageUrlFront.value = reader.result as string; // 将 Data URL 赋值给 imageUrlFront
    // };
  }
  function cancel() {
    emit("update:visible", false);
  }
  function submitForm() {
    // 在这里处理表单提交逻辑，例如发送请求到服务器
    console.log("Form submitted:", queryParams.value);
    // 通知父组件更新 visible 为 false
    emit("update:visible", false);

  }

  const childMethod = () => {
    imageUrl.value.url1 = "";
    imageUrl.value.url2 = "";
    if (uploadRef.value) {
      uploadRef.value.clearFiles();
    }
  };

  defineExpose({
    childMethod,
  });
</script>

<style lang="scss" scoped>
.boardBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: scroll;
  height: 100%;
  width: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .tishi {
    font-size: 14px;
    color: #999;
    background-color: #f3f8fb;
    padding: 5px 10px;
    border-radius: 6px;
  }

  .el-upload_tip {
    margin-top: 10px;
    font-size: 15px;
    color: #666;
  }

  .tips {
    font-size: 13px;
    color: #666;
    text-align: center;
  }
}
</style>
